<template>
  <section class="visit_detail_box">
    <div class="userinfo p-sm">
      <p>
        <img v-if="detail.head" :src="detail.head" class="patient_img" alt />
        <img v-else src="/img/unknown-avatar.4f0c79ac.png" class="patient_img" alt />
      </p>
      <p>
        <span style="font-size: 20px; margin-right: 20px; vertical-align: middle;">{{detail.name}}</span>
        <i class="glyphicon glyphicon-earphone" style="vertical-align: middle; font-size: 18px;"></i>
      </p>
      <p>
        <!-- <el-button @click="getRecord()" type="primary">患者记录</el-button> -->
        <!-- <button type="button" class="btn btn-primary">发券</button> -->
      </p>
      <div class="user-field">
        <span>病历号：</span>
        {{detail.archivesCode}}
      </div>
      <div class="user-field">
        <span>电话：</span>
        {{detail.mobile}}
      </div>
      <div class="user-field">
        <span>性别：</span>
        {{detail.sex | toSex}}
      </div>
      <div class="user-field">
        <span>年龄：</span>
        <span v-if="detail.age>18">{{detail.age}}</span>
        <span v-else>{{detail.birthday|toTimeContrast}}</span>
      </div>
      <div class="user-field">
        <span>余额：</span>
        <span style="color: red;">￥ {{detail.patientMoney}}</span>
      </div>
      <!-- <div class="user-field">
        <span>会员：</span>
        vip
      </div>-->
    </div>
    <div class="user-content p-sm">
      <h3>血糖记录表 (主治医生: )
        <el-button style="float:right;" @click="getReturn">返回</el-button>
      </h3>
      <table class="table-box">
        <thead>
          <tr>
            <th>HbA1C</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>日期</td>
          </tr>
          <tr>
            <td>数值</td>
          </tr>
        </tbody>
      </table>
      <div style="margin-top:10px;">
        <el-button @click="openSign()">记录血糖</el-button>
        <el-button @click="openSet()">设定血糖范围</el-button>
      </div>
      <table class="table-box sugar_table">
        <thead>
          <tr>
            <th rowspan="2">日期</th>
            <th rowspan="2">凌晨
              <label class="scope_label">（{{scope.weeHoursMin}}-{{scope.weeHoursMax}}）</label>
            </th>
            <th rowspan="2">空腹
              <label class="scope_label">（{{scope.limosisMin}}-{{scope.limosisMax}}）</label>
            </th>
            <th colspan="2">早餐
              <label class="scope_label">（{{scope.breakfastMin}}-{{scope.breakfastMax}}）</label>
            </th>
            <th colspan="2">午餐
              <label class="scope_label">（{{scope.lunchMin}}-{{scope.lunchMax}}）</label>
            </th>
            <th colspan="2">晚餐
              <label class="scope_label">（{{scope.supperMin}}-{{scope.supperMax}}） </label>
            </th>
            <th rowspan="2">睡前
              <label class="scope_label">（{{scope.sleepMin}}-{{scope.sleepMax}}） </label>
            </th>
            <th rowspan="2">备注</th>
            <!-- <th rowspan="2">当日处方</th> -->
            <th rowspan="2">操作</th>
          </tr>
          <tr>
            <th>早</th>
            <th>晚</th>
            <th>早</th>
            <th>晚</th>
            <th>早</th>
            <th>晚</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in tableList" :key="index">
            <td>{{item.gmtCreate | changeTime}}</td>
            <td>{{item.weeHours}}</td>
            <td>{{item.limosis}}</td>
            <td>{{item.beforeBreakfast}}</td>
            <td>{{item.afterBreakfast}}</td>
            <td>{{item.antePrandium}}</td>
            <td>{{item.afterLunch}}</td>
            <td>{{item.beforeDinner}}</td>
            <td>{{item.afterDinner}}</td>
            <td>{{item.beforeSleep}}</td>
            <td>{{item.remark}}</td>
            <!-- <td>2018-03-08</td> -->
            <td>
              <el-button @click="editSign(item)">编辑</el-button>
            </td>
          </tr>
        </tbody>
      </table>
      <br />
      <pager v-model="pager" @change-pagenum="getData"></pager>
    </div>

    <sign v-model="dialogSign" :patientId="patientId" v-if="dialogSign" @success="getSuccess"></sign>
    <set v-model="dialogSet" :patientId="patientId" :surgarId="surgarId" :scope="scope"  @success="gePatientGlucosePriceById"></set>
    <edit v-model="dialogEdit" v-if="dialogEdit" :curItem="curItem" :patientId="patientId" @success="getData"></edit>
  </section>
</template>
<script>
export default {
  name: "visitDetail",
  data() {
    return {
      activeName: "info",
      dialogSign: false,
      dialogSet: false,
      dialogEdit: false,
      active: false,
      detail: "",
      pager: { pageSize: 10, pageNum: 1, total: 0 },
      tableList: [],
      ispersonal: false,
      patientId: "",
      curItem: "",
      scope: "",
      surgarId: ""
    };
  },
  created() {},
  mounted() {
    let th = this;
    th.getData();
    th.findUsUserById();
    th.gePatientGlucosePriceById();
  },
  methods: {
    findUsUserById() {
      let th = this;
      th.verifyUrlAttack(th.$route.query).then(() => {
        let uid = th.jieMi(th.$route.query.id);
        th.patientId = uid;
        th.$api
          .getThePatientLibraryById({ patientId: uid, hpId: th.adminUser.hpId })
          .then(res => {
            if (res.executed) {
              th.detail = res.thePatientLibraryDetail;
              th.detail.labelIds = th.detail.labelIds.split(",");
              th.active = true;
              th.ispersonal = false;
            }
          });
      });
    },
    gePatientGlucosePriceById() {
      let th = this;
      th.$api
        .gePatientGlucosePriceById({ patientId: th.patientId })
        .then(res => {
          if (res.executed) {
            th.scope = res.dataBody;
            if (res.dataBody) {
              th.surgarId = res.dataBody.id;
            }
          }
        });
    },
    getData(type) {
      let th = this;
      if (type == -1) {
        th.pager.pageNum = 1;
        th.pager.total = 0;
      }
      let uid = th.jieMi(th.$route.query.id);
      th.patientId = uid;
      let j = { patientId: uid };
      Object.assign(j, th.pager);
      th.$api.selectPatientGlucoseRecord(j).then(res => {
        if (res.executed) {
          th.tableList = res.dataBody.list;
          th.pager.total = res.dataBody.total;
        }
      });
    },
    getSuccess() {
      let th = this;
      th.getData();
      th.gePatientGlucosePriceById();
    },
    editSign(item) {
      let th = this;
      th.curItem = item;
      th.dialogEdit = true;
    },
    openSet() {
      let th = this;
      th.dialogSet = true;
    },
    openSign() {
      let th = this;
      th.dialogSign = true;
    },
    getReturn() {
      let th = this;
      let j = {
        id: th.jiaMi(th.patientId),
        type: 3
      };
      th.$router.push({
        path: "/page/userDetail",
        query: th.getUrlToken(j)
      });
    }
  },
  components: {
    set: () => import("../_com/setSugar"),
    sign: () => import("../_com/sugarSign"),
    edit: () => import("../_com/editSugarSign")
  }
};
</script>
<style lang="scss" scoped>
@import "../_css/detail.scss";
.patient_img {
  border: 1px solid #ddd;
  border-radius: 5px;
  display: inline-block;
  width: 100px;
  height: 100px;
}
.scope_label {
  display: inline-block;
  width: 100%;
}
.sugar_table {
  border: 1px solid #ccc;
  // border-left: 1px solid #ccc;
  // border-right: 1px solid #ccc;
  margin-top: 20px;
  th,
  td {
    text-align: center;
    border-right: 1px solid #ccc;
  }
}
</style>

